<template>
  <div class="wh-full f-c-c gap-x-130 bg-[url(@/assets/login-bg.png)] bg-cover">
    <div class="flex-col items-center">
      <img src="@/assets/login-logo.png" class="w-343" />
      <div class="mb-16 mt-30 font-size-32 color-#030912 font-600">{{ title }}</div>
      <div class="font-size-12 color-#686F7C font-500">让文件资源管理更简单、更高效、更快捷</div>
    </div>
    <div class="card-sahdow min-w-400 rounded-8 bg-#FFF px-40 py-100">
      <div class="mb-20 font-size-22 color-#030912 font-600">账号密码登录</div>
      <n-form ref="$form" :model="loginInfo" :show-require-mark="false">
        <n-form-item
          label="账户"
          :rule="[{ required: true, message: '请输入账户' }]"
          path="account"
        >
          <n-input v-model:value="loginInfo.account" clearable :maxlength="50" />
        </n-form-item>
        <n-form-item
          label="密码"
          path="password"
          :rule="[{ required: true, message: '请输入密码' }]"
        >
          <n-input
            v-model:value="loginInfo.password"
            show-password-on="click"
            type="password"
            clearable
            :maxlength="50"
          />
        </n-form-item>
        <n-form-item path="time" label-placement="left">
          <n-checkbox v-model:checked="loginInfo.time" :checked-value="5" :unchecked-value="2">
            5天内自动登录
          </n-checkbox>
          <n-button
            class="ml-40 color-#FFF"
            color="#4D73F0"
            :disabled="disable"
            @click="openFeishu"
          >
            飞书登录
          </n-button>
        </n-form-item>
        <n-form-item>
          <n-button
            :disabled="disable"
            class="h-46 w-100% font-size-16 color-#FFF"
            color="#4D73F0"
            attr-type="button"
            :loading="loading"
            @click="handleLogin"
          >
            登录
          </n-button>
        </n-form-item>
      </n-form>
    </div>
  </div>
</template>

<script setup>
import { useUserStore } from '@/store'
import { initUserAndPermissions } from '@/router'
const userStore = useUserStore()
const router = useRouter()
const route = useRoute()
const loginInfo = ref({
  account: '',
  password: '',
  time: 2,
})
const title = import.meta.env.VITE_TITLE
const REDIRECT_URI = import.meta.env.VITE_REDIRECT_URi
const loading = ref(false)
const $form = ref(null)
const disable = ref(false)
async function handleLogin() {
  $form.value.validate(async (errors) => {
    if (!errors) {
      loading.value = true
      userStore
        .login(loginInfo.value)
        .then(() => {
          onLoginSuccess()
        })
        .finally(() => {
          loading.value = false
        })
    }
  })
}

async function onLoginSuccess() {
  disable.value = true
  $message.loading('登录中...', { key: 'login' })
  try {
    await initUserAndPermissions()
    $message.success('登录成功', { key: 'login' })
    disable.value = false
    if (route.query.redirect) {
      const path = route.query.redirect
      delete route.query.redirect
      router.push({ path, query: route.query })
    } else {
      router.push('/')
    }
  } catch (error) {
    disable.value = false
    console.error(error)
    $message.destroy('login')
  }
}
function openFeishu() {
  const redirect_uri = REDIRECT_URI || `http%3a%2f%2f${'192.168.3.170:3200'}%2flogin`
  const feishuUrl = `https://open.feishu.cn/open-apis/authen/v1/index?redirect_uri=${redirect_uri}&app_id=cli_a504903d5472900c&state=autoLogin`
  window.open(feishuUrl, '_self')
}
function autoFeishuLogin() {
  if (route.query.code) {
    $message.loading('登录中...', { key: 'login' })
    userStore
      .feishuLogin({
        code: route.query.code,
        time: 5,
      })
      .then(() => {
        onLoginSuccess()
      })
  }
}
onBeforeMount(() => {
  autoFeishuLogin()
})
</script>
